<template>
    <a-row>
        <!-- v-userAuth="'G2'" -->
        <a-row class='mytitle'>
            <!-- <router-link :to='{name:"index"}'><a-icon type="arrow-left" style="color:var(--themeColor);margin-right:0.5em" /></router-link> -->
            <!-- <i class="icon icon-user16l title-icon-style"></i> -->
            {{ $t('Oauth2身份认证管理') }}
        </a-row>

        <NoAuthPage v-showNoAuth="'G6-1'" />

        <a-row v-userAuth="'G6-1'" style="margin:1em">
            <a-card hoverable>
                <div class="tips border-primary j-border-radius-sm  pt-10 pb-10 pl-10 pr-20 mt-10 mb-12 tipstyle flex">
                    <Iconfont class="icon pt-4 pr-4" type="a-16_f_ic_about" style="color: #2d74ff; margin-top: 10px;">
                    </Iconfont>
                    <div>
                        <div>{{ '1、' + $t('当前支持超级/系统管理员注册、编辑、删除 OAuth2 服务端。运维人员、审计人员仅支持查看服务端信息。') }}</div>
                        <div>{{ '2、' + $t('最多支持创建 10 个 OAuth2 服务端。最多仅支持同时开启 3 个 OAuth2 服务端。') }}</div>
                    </div>
                </div>

                <!-- <div>
                    <a-button v-userAuth="'G4-2'" v-if="dataList.length == 0" type='primary' @click="handleCreate" style="width: 100px;">
                    {{ $t('Create') }}
                </a-button>
                </div> -->


                <div>
                    <a-button v-userAuth="'G6-2'" type='primary' @click="handleCreate" style="width: 100px;">
                        {{ $t('Create') }}
                    </a-button>
                </div>

                <a-spin :spinning="loading">
                    <a-table style="margin-top: 16px;" class='tabstyle' :columns="columns" :loading="loading"
                        :dataSource="dataList" size="small" rowKey='auth_section_key' :pagination='pagination'
                        :locale="defaultSetting" :scroll="{ x: 1340 }">
                        <template slot="auth_role" slot-scope="text, record">
                            <span>{{ roleMap.get(record.role_id) }}</span>
                        </template>
                        <template slot="access_type" slot-scope="text, record">
                            <span>{{ typeMap.get(record.access_type) }}</span>
                        </template>
                        <template slot="operate" slot-scope="text, record">
                            <span v-userAuth="'G6-1'" class="j-text-main cursor-pointer mr-10" @click="handleView(record)">{{ $t('View') }}</span>
                            <span v-userAuth="'G6-3'" class="j-text-main cursor-pointer mr-10" @click="handleModify(record)">{{ $t('Edit') }}</span>
                            <!-- <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('Edit') }}</span>
                                </template>
<Iconfont v-userAuth="'G4-2'" class="icon table-operation-icon" type="icon-edit16f" @click="handleModify(record)">
</Iconfont>
</a-tooltip> -->
                            <span v-userAuth="'G6-5'" class="j-text-main cursor-pointer mr-10" @click="handleClose(record)">
                                <span v-if="record.switch == 1"> {{ $t('Close') }}</span>
                                <span v-if="record.switch == 0"> {{ $t('开启') }}</span>

                            </span>
                            <span v-userAuth="'G6-4'" class="j-text-red cursor-pointer mr-10" @click="handleDelete(record)">{{ $t('Delete')
                            }}</span>
                            <!-- <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('Delete') }}</span>
                                </template>
                                <Iconfont v-userAuth="'G4-2'" class="icon table-operation-icon" type="icon-delete16f"
                                    @click="handleDelete(record)"></Iconfont>
                            </a-tooltip> -->
                        </template>
                    </a-table>
                </a-spin>




            </a-card>
        </a-row>


        <viewOAuth ref="viewRef" :detailList="detailList" />
        <appendQAuth ref="createRef" @get-list="getList" :roleArray="roleArray" />
        <modifyQAuth ref="modifyRef" @get-list="getList" :roleArray="roleArray"  />
        <closeOpenOauth ref="clopenRef" @get-list="getList" />
        <delOAuth ref="deleteRef" @get-list="getList" />

    </a-row>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import viewOAuth from './OAuth/viewOAuth.vue'
import appendQAuth from './OAuth/appendQAuth'
import modifyQAuth from './OAuth/modifyQAuth'
import closeOpenOauth from './OAuth/closeOpenOauth.vue'
import delOAuth from './OAuth/delOAuth.vue'
import request from '@/request/request'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: 'OAuth',
    components: { EmptyData, viewOAuth, closeOpenOauth, delOAuth, appendQAuth, modifyQAuth, NoAuthPage },
    data() {
        return {
            columns: [
                {
                    title: this.$t('授权名称'),
                    dataIndex: "auth_name",
                    key: "auth_name",
                    width: 120,
                    ellipsis: true,
                    fixed: 'left'
                },
                {
                    title: this.$t('授权URL'),
                    dataIndex: "auth_url",
                    key: "auth_url",
                    ellipsis: true,
                    width: 190,
                },
                {
                    title: this.$t('角色'),
                    dataIndex: "role_id",
                    key: "role_id",
                    ellipsis: true,
                    width: 100,
                    scopedSlots: { customRender: 'auth_role' }
                },
                {
                    title: this.$t('获取token地址'),
                    dataIndex: "get_token_url",
                    key: "get_token_url",
                    ellipsis: true,
                    width: 190,
                },
                {
                    title: this.$t('用户信息地址'),
                    dataIndex: "get_user_url",
                    key: "get_user_url",
                    ellipsis: true,
                    width: 190,
                },
                {
                    title: this.$t('退出登录地址'),
                    dataIndex: "login_out_url",
                    key: "login_out_url",
                    width: 190,
                    ellipsis: true,
                },
                {
                    title: this.$t('客户端ID'),
                    dataIndex: "client_id",
                    key: "client_id",
                    ellipsis: true,
                    width: 190,
                },
                {
                    title: this.$t('客户端密钥'),
                    dataIndex: "client_secret",
                    key: "client_secret",
                    ellipsis: true,
                    width: 190,
                },
                {
                    title: this.$t('服务端类型'),
                    dataIndex: "access_type",
                    key: "access_type",
                    ellipsis: true,
                    width: 120,
                    scopedSlots: { customRender: 'access_type' }
                },
                {
                    title: this.$t('Operate'),
                    key: "operate",
                    width: 200,
                    scopedSlots: { customRender: 'operate' },
                    fixed: 'right',
                }
            ],
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onShowSizeChange: (current, pageSize) => { this.pageSize = pageSize; },
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`,
            },
            dataList: [],
            delName: '',
            detailList: {},
            ifData: false,
            isShow: false,
            loading: false,
            defaultSetting: { emptyText: <EmptyData /> },
            roleArray: [],
            roleMap: new Map(),
            typeMap: new Map([
                [1, 'General']
            ])
        }
    },
    mounted() {
        this.getList()
        this.getRoleData()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.oauth.getQAuthList()
            if(data.flag === 0) {
                this.ifData = data.data.filter(item => item.switch).length >= 3
                this.dataList = data.data
            }
            // this.dataList = data.slice(0, 1)
            this.loading = false
        },

         //获取用户身份数据
        async getRoleData() {
            request('post', 'usermanager/role/getRoleInfoList').then(res => {
                // console.log('获取所有角色类型', res)
                this.roleArray = res.data;
                let roleMap = new Map();
                res.data.forEach(item => {
                    roleMap.set(item.role_id, item.role_name);  
                })
                this.roleMap = new Map(roleMap);  
            })
        },
        handleCreate() {
            this.$refs.createRef.isShow = true
        },
        handleModify(item) {
            this.$refs.modifyRef.isShow = true
            this.$refs.modifyRef.formData = item
        },
        async handleView(item) {
            this.$refs.viewRef.isShow = true
            this.detailList = { ...item }
        },
        handleClose(item) {
            this.$refs.clopenRef.formData = item
            this.$refs.clopenRef.isFlag = this.ifData
            this.$refs.clopenRef.isShow = true
        },
        handleDelete(item) {
            this.$refs.deleteRef.formData = item
            this.$refs.deleteRef.isShow = true
            // this.loading = true
            // let _this = this
            // const auth_section_key = item.auth_section_key
            // this.$confirm({
            //     title: '你确定要删除',
            //     okText: this.$t('Sure'),
            //     okType: 'danger',
            //     cancelText: this.$t('Cancel'),
            //     async onOk() {
            //         const { data: { flag, msg } } = await request('DELETE', `/usermanager/auth_edit/?auth_section_key=${auth_section_key}`)
            //         if (flag === 0) {
            //             _this.$message.success(msg);
            //             _this.getList()
            //         } else {
            //             _this.$message.error(msg);
            //         }
            //     },
            //     onCancel() {

            //     }
            // })
            // this.loading = false
        },
    }
}
</script>

<style scoped>
.tipstyle {
    background-color: #cad5ff;
    border-color: #8ca3ff;
}
</style>
